<template>        
    <Modal v-model="modal" title="erp绑定关系" fullscreen>
      <Table
        :height="options.tableHeight"
        stripe
        :columns="list.columns"
        :data="list.data"
        @on-selection-change="onChange"
        no-data-text="亲，没有找到相关记录哦！~"></Table>
      <Loader :status="status" @refresh="getData"></Loader>
      <div slot="footer">
        <Button @click="onUnBind" :disabled="disabled" type="primary" size="large">解绑</Button>
    </div>
    </Modal>
</template>

<script>
import list from './ErpEditData'
export default {
  data() {
    return {
      modal: false,
      disabled: false,
      materialId: [],
      selection: [],
      centerProductId: null,
      status: 'pass',
      list: list,
      options: {
        tableHeight: 300
      }
    }
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    updateForm(centerProductId) {
      this.initTable()
      this.modal = false
      this.disabled = false
      this.list.currentPage = 1
      this.materialId = []
      this.selection = []
      this.openModal()
      this.centerProductId = centerProductId
      this.getData()
    },
    getData() {
      this.disabled = true
      this.status = 'loading'
      this.openModal()
      this.$jsonPost(`/product/erp_materiel/materiel_list/${this.centerProductId}`).then(data => {
        this.list.data = []
        this.status = 'pass'
        this.disabled = false
        this.list.data = data || []
        if (this.list.data.length === 0) this.disabled = true
      }).catch(() => {
        this.status = 'error'
      })
		},
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    onChange(selection) {
      this.selection = selection
    },
    onUnBind() {
      if (this.disabled || this.status === 'loading') return
      if (this.selection.length === 0) {
        this.$Notice.warning({
          title: '请先选择要解绑的物料'
        })
        return
      }
      this.disabled = true
      this.materialId = this.selection.map(item => item.materialId)
      this.$Modal.confirm({
        title: '解绑',
        content: '确定要解绑吗？',
        onOk: () => {
          this.$jsonPost('/product/erp_materiel/unBinding', this.materialId).then(() => {
            this.$Notice.success({
              title: '解绑成功'
            })
            this.closeModal()
            this.disabled = false
            this.$emit('update')
          })
        },
        onCancel: () => {
          this.disabled = false
        }
      })
    },
    initTable(translate = 0) {
      this.setTableSize(translate)
      window.addEventListener('resize', () => {
        this.tableTimer && clearTimeout(this.tableTimer)
        this.tableTimer = setTimeout(() => this.setTableSize(translate), 100)
      })
    },
    setTableSize(translate = 0) {
      let target = document.documentElement.clientHeight || document.body.clientHeight
      if (!target) return
      let height = target - 170 - translate
      this.options.tableHeight = height
    }
  }
};
</script>
